/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }


::selection {
	background: #e2a1a1; /* Safari */
	}
::-moz-selection {
	background: #e2a1a1; /* Firefox */
}



#typolist {
	max-width: 1095px;
	margin: 0 auto;
	color: #000;
}


#typolist_wrapper{
	text-align: left;
}


.typolist_link h2{
	font-family:BrandonGrotesque-Bold, Helvetica;
	font-size:50px;
	text-align: left;
	letter-spacing: 2px;
	margin-bottom: 0;
}

.typolist_link p{
	font-family:BrandonGrotesque-Regular, Helvetica;
	font-size: 20px;
	text-align: left;
	letter-spacing: 1px;
	margin-top: 0;
	border-bottom: 1px solid #525252;
	padding-bottom: 20px;
	color: rgba(0,0,0,,0.61);
	
}


.typo_button{
	display: inline-block;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 30px;
	text-align: right;
	letter-spacing: 1px;
	border: 1px solid #000;
	text-decoration: none;	
}


.journal {
	background-color: #fdfdfc;	
	font-family:BrandonGrotesque-Regular, Helvetica;
	-webkit-font-smoothing: subpixel-antialiased !important;

	
}


/************************************************************************* OnScrollNavigation *************************************************************************/


#fademenu {
background: #fdfdfc;
display: none;
position: fixed;
right: 0;
top: 0;
width: 100%;
height: 80px;
z-index:995;
text-align: right;
padding-top: 10px;
}



.navscroll{
	
    position: relative;
    text-align: right;
    right:60px;
    top:16px;
    display: inline-block !important;
    
}


.navscroll a{
	
	text-decoration: none;
	text-transform: uppercase;
    color: #000;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 16px;
    margin-right: 15px;
    -webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;

	}
	
	
.navscroll a:hover{

	border-bottom: 3px solid black;
    
}


.logo{
	position: fixed;
	top:18px;
	left: 10%;
	text-decoration: none;
	text-transform: uppercase;
    color: #0000;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
	display: inline-block !important;
}



/************************************************************************* NAVIGATION *************************************************************************/

nav{
    margin:50px 60px 0px 0px;
    text-align:right;
}


nav a{
	text-decoration: none;
	text-transform: uppercase;
    color: #000;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    margin-right: 15px;
    -webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}



nav a:hover{
	border-bottom: 3px solid black;
    
}


/************************************************************************* CONTENT *************************************************************************/

.wrapper {
	position: relative;
	top: -30px;
	opacity: 0;

}



/************************************************************************* BILDER *************************************************************************/

.grid {
	padding: 30px 0px 0px 0px;
	max-width: 1120px;
	margin: 0 auto;
	list-style: none;

}


.grid li {
	display: inline-block;
	margin: 0px;
	padding: 8px;
}

.grid figure {
	margin: 0;
	position: relative;
}


.grid figure img {
	max-width:260px;
	max-height: 230px;
	display: block;
	position: relative;
}

.grid figcaption {
	position: absolute;
	top: -8px;
	padding: 2px;
	background: #fdfdfc;
	color: #525252;
}


.grid figcaption h3 {
	margin: 0;
	padding: 0;
	color: #000;
	text-transform: uppercase;
	font-family: 'Source Sans Pro', sans-serif;
	letter-spacing: 1.5px;
	
}


.grid figcaption a {
	text-decoration: none;
	text-align: center;
	padding: 10px 15px 10px 15px;
	text-transform: uppercase;
	font-size: 15px;
	display: inline-block;
	color: #000;
	border: 3px solid #000;
	font-family: 'Source Sans Pro', sans-serif;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.grid figcaption a:hover {
	color: #fdfdfd;
	background-color: #000;
	border: 3px solid black;
	font-family: 'Source Sans Pro', sans-serif;
	-webkit-transition: all .3s ease-in-out;
}


figcaption {
	height: 100%;
	width: 100%;
	opacity: 0;
	text-align: center;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.cs-style-1 figcaption {
	height: 100%;
	width: 100%;
	opacity: 0;
	text-align: center;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
    background-color:#DBDEE1;
}

.no-touch .cs-style-1 figure:hover figcaption,
.cs-style-1 figure.cs-hover figcaption {
	opacity: 1;
	-webkit-transform: translate(0px, 8px);
	-moz-transform: translate(0px, 8px);
	-ms-transform: translate(0px, 8px);
	transform: translate(0px, 8px);
}

.cs-style-1 figcaption h3 {
	margin-top: 20px;
}



.cs-style-1 figcaption span {
	font-family: 'Source Sans Pro', sans-serif;
	letter-spacing: 1px;
	font-size: 14px;
	color: #000;
	display: block;
}

.cs-style-1 figcaption a {
	margin-top: 30px;
}




/************************************************************************ Copyright Wrapper *************************************************************************/

#copyright_wrapper {
	max-width: 400px;
	margin:  35px auto 40px auto;
}

#copyright_wrapper p{
	opacity: 0.5;
	
	padding-top: 10px;
	text-align: center;
	color: #000;
	font-size: 15px;
	font-family: 'Source Sans Pro', sans-serif;
}
 
#copyright_wrapper a{
	color: rgba(0,0,0,0.4);
	text-align: center;
	text-decoration: none;
	font-family: 'Source Sans Pro', sans-serif;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}


#copyright_wrapper a:hover{
	color: rgba(81,81,81,1);

}
 
 
@media only screen and (max-width : 1120px),
only screen and (max-device-width : 1120px){

.logo{
	display: none !important;
}

.navscroll{
	width: 75%;
	top:18px;
	right: 29%;
	margin: 0 0 0 -37.5%;
    }

.grid {
	text-align: center;
}

	
}



@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){

#top, #bottom, #left, #right { 
	display: none; 
}

#top2, #bottom2, #left2, #right2 { 
	display: none; 
}

.grid li {
	padding: 0px 0px 25px 0px;
}


.cs-style-1 figcaption h3 {
	margin-top: 10px;
}
	

.grid figure img {
	max-width:100%;
	display: block;
	position: relative;
}


nav{
	
    margin: 0px auto 0px auto;
    text-align:center;
    background: #fdfdfc;
    position: fixed;
    z-index:995;
    width:100%;
    height: 55px;
    padding-top: 10px;
    padding-left: 9px;
}



nav a{
  	margin: 0px 5px 0px 0px;
   font-size: 14px;
 
   
}


#fademenu{
	display: none !important;
	}



#name  p {
font-size: 1em;
	margin-top: -14px;
}




@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){

#fullscreen {
	visibility: hidden;
}

}